<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="证书类型">
              <j-dict-select-tag
                placeholder="请选择证书类型"
                v-model="queryParam.certificateType"
                dictCode="certificate_type"
              />
            </a-form-item>
          </a-col>
        
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置 </a-button>
             
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
    
    
        <!-- <a-button type="primary" icon="import">导入</a-button> -->
     
      <!-- 高级查询区域 -->
    
    </div>

    <!-- table区域-begin -->
    <div>
     
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="certificate(record)">变更证书</a-button>
        </span>
      </a-table>
    </div>
    <!-- 产品备案 -->
    <zzzsProductRecordingFormModal
      ref="modalForm"
      @ok="modalFormOk"
      :visible="product"
      @productClose="productClose"
      :id="id"
    >
    </zzzsProductRecordingFormModal>
    <!-- 生产能力能力备案 -->
    <ZzzsRecordingOfProductionCapacityList
      ref="modalForm"
      @ok="modalFormOk"
      :visible="production"
      @productionClose="productionClose"
      :id="id"
    >
    </ZzzsRecordingOfProductionCapacityList>
    <!-- 企业备案 -->
    <ZzzsRecordEnterpriseForm
      ref="modalForm"
      @ok="modalFormOk"
      :visible="enterprise"
      @enterpriseClose="enterpriseClose"
      :id="id"
    ></ZzzsRecordEnterpriseForm>
    <!-- 供货能力备案 -->
    <ZzzsRecordOfSupplyAbilityList
      ref="modalForm"
      @ok="modalFormOk"
      :visible="supply"
      @supplyClose="supplyClose"
      :id="id"
    >
    </ZzzsRecordOfSupplyAbilityList>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ZzzsCertificateModal from './modules/ZzzsCertificateModal'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, postAction } from '../../api/manage'
import zzzsProductRecordingFormModal from '../productForReference/modules/ZzzsProductRecordingModal.Style#Drawer.vue'
import ZzzsRecordEnterpriseForm from '../productForReference/modules/ZzzsRecordEnterpriseModal.Style#Drawer.vue'
import ZzzsRecordOfSupplyAbilityList from '../productForReference/modules/ZzzsRecordOfSupplyAbilityModal.Style#Drawer.vue'
import ZzzsRecordingOfProductionCapacityList from '../productForReference/modules/ZzzsRecordingOfProductionCapacityModal.Style#Drawer.vue'

export default {
  name: 'ZzzsCertificateList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    zzzsProductRecordingFormModal,
    ZzzsRecordingOfProductionCapacityList,
    ZzzsRecordEnterpriseForm,
    ZzzsRecordOfSupplyAbilityList,
    ZzzsCertificateModal,
  },
  data() {
    return {
      id: '',
      record: 1,
      description: '证书变更页面',
      enterprise: false,
      supply: false,
      product: false,
      production: false,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '创建日期',
          align: 'center',
          dataIndex: 'createTime',
        },

        {
          title: '证书类型',
          align: 'center',
          dataIndex: 'certificateType_dictText',
        },
        {
          title: '备案id',
          align: 'center',
          dataIndex: 'certificateId',
        },
        {
          title: '证书',
          align: 'center',
          dataIndex: 'certificateUrl',
          scopedSlots: { customRender: 'fileSlot' },
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/modules/zzzsCertificate/listChange',
        delete: '/modules/zzzsCertificate/delete',
        deleteBatch: '/modules/zzzsCertificate/deleteBatch',
        exportXlsUrl: '/modules/zzzsCertificate/exportXls',
        importExcelUrl: 'modules/zzzsCertificate/importExcel',
        editUrl: '/modules/zzzsCertificate/cancellationCertificate',
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  created() {
    this.getSuperFieldList()
    // this.theCancellation();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    supplyClose() {
      this.supply = false
      this.loadData()
      console.log(this.dataSource)
    },
    enterpriseClose() {
      this.loadData()
      this.enterprise = false
    },
    productionClose() {
      this.loadData()
      this.production = false
    },
    productClose() {
      this.loadData()
      this.product = false
    },
    /**
     * 变更证书
     */
    certificate(record) {
      this.id = record.certificateId
      console.log(this.id)
      if (record.certificateType == 0) {
        this.enterprise = true
      } else if (record.certificateType == 1) {
        this.product = true
      } else if (record.certificateType == 2) {
        this.production = true
      } else if (record.certificateType == 3) {
        this.supply = true
      }
    },
    initDictConfig() {},

    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'datetime', value: 'createTime', text: '创建日期' })
      fieldList.push({ type: 'datetime', value: 'updateTime', text: '更新日期' })
      fieldList.push({ type: 'string', value: 'certificateType', text: '证书类型', dictCode: 'certificate_type' })
      fieldList.push({ type: 'string', value: 'certificateId', text: '证书id', dictCode: '' })
      fieldList.push({ type: 'string', value: 'certificateUrl', text: '证书url', dictCode: '' })
      fieldList.push({ type: 'int', value: 'status', text: '状态', dictCode: 'certificate_status' })
      this.superFieldList = fieldList
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>